
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/Style.css">
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/login.css"/>
    <script src="bootstrap-3.3.7-dist/js/JQuery.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.1.9.min.js"></script>
    <script>
        function checkUserName(){
            var flag;
            var userName =  $("#userName").val();
            if(userName==null || userName==="null" || userName===""){
                flag=false;
                $("#error_msg").html("账号不能为空");
                return;
            }else{
                var reg=/^[0-9a-zA-Z_]{8,}$/;
                if(!reg.test(userName)){
                    flag=false;
                    $("#error_msg").html("用户名至少8位字母数字下划线均可");
                    return;
                }else{
                    flag=true;
                }
            }
            return flag;
        }

        function checkPassWord(){
            var flag;
            var pws =  $("#pws").val();
            if(pws==null || pws=="null" || pws==""){
                flag=false;
                $("#error_msg").html("密码不能为空");
                return;
            }else{
                var reg=/([a-zA-Z0-9!@#$%^&*()_?<>{}]){6,18}/;
                if(!reg.test(pws)){
                    flag=false;
                    $("#error_msg").html("密码至少6位字母数字下划线均可");
                    return;
                }else{
                    flag=true;
                }
            }
            return flag;
        }

        function checkCode(){
            var flag;
            var yzm =  $("#yzm").val();
            if(yzm==null || yzm=="null" || yzm==""){
                flag=false;
                $("#error_msg").html("验证码不能为空");
                return;
            }else{
                flag=true;
            }
            return flag;
        }
            

        $(function(){
            $(".loginbut").click(function(){
                if(checkUserName() && checkPassWord() && checkCode()){
                    $.post("user?method=login",$("#loginForm").serialize(),function(data){
                        if(data.flag){
                            alert("登陆成功");
                            location.href="view/index.html";
                        }else{
                            alert("登陆失败");
                            $("#error_msg").html(data.errorMsg);
                        }
                    });
                }
            });
            $("#userName").blur(checkUserName);
            $("#pws").blur(checkPassWord);
            $("#yzm").blur(checkCode);
        });
    </script>

</head>
<body background="images/bg.jpg">
<h1>欢迎登录个人笔记系统</h1>
<div class="login">
    <div id="error_msg" style="color: red; text-align: center;"></div>
    <form id="loginForm" class="form-horizontal" method="post" action="#">
        <div class="form-group">
            <label for="userName" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="userName" id="userName" placeholder="请输入用户名">
            </div>
        </div>
        <div class="form-group">
            <label for="pws" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" name="password" id="pws" placeholder="请输入密码">
            </div>
        </div>
        <div class="form-group">
            <label for="yzm" class="col-sm-2 control-label">验证码</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="yzm" id="yzm" placeholder="请输入验证码">
                <img id="img" src="checkCode?method=createCode" onclick="changeCheckCode(this)"/>
                <input style="display: inline;margin-left: 50px;" id="autoLogin" name="auto" type="checkbox"/><font style="display: inline;">记住我</font>
                <script>
                    function changeCheckCode() {
                        $("#img").attr("src", "checkCode?method=createCode&time=" + new Date().getTime());
                    }
                </script>
            </div>
        </div>
        <div style="width: 100%;" class="form-group">
            <div class="col-sm-offset-3 col-sm-10">
                <a style="border: none;padding-left: 20px;color: #2aabd2;" href="forgetPwd.html">forgetPws?</a>
                <button type="button" class="btn btn-default loginbut">登录</button>
                <a href="regist.html">注册</a>
            </div>
        </div>
    </form>
</div>
</body>
</html>
